<template>
  <div v-if="HeroList">
    <!-- 顶栏 -->
    <div class="topbar bg-black p-y-2 p-x-3 d-flex ai-center">
      <img src="../assets/logo.png" height="30" />
      <div class="text-white m-x-2 fs-xl flex-1">王者荣耀 &nbsp;攻略站</div>
      <!-- [>]符号可以用转义 &gt -->
      <div class="text-white fs-lg p-r-2"><span>更多英雄 </span> ></div>
    </div>

    <!-- 背景图 背景图的设置在style里面：background-image-->
    <div class="top" :style="{ 'background-image': `url(${HeroList.banner})` }">
      <!-- 背景图英雄简略信息 -->
      <!-- 高度设置为100% 这样可以垂直方向填满top  然后改变jc方向设置jc-end-->
      <div class="info text-white p-3 d-flex flex-column jc-end h-100">
        <div class="fs-sm">{{ HeroList.title }}</div>
        <h2 class="m-y-2 p-x-0">{{ HeroList.name }}</h2>
        <div class="fs-sm">
          {{
            HeroList.categories[1]
              ? `${HeroList.categories[1].name}/${HeroList.categories[0].name}`
              : HeroList.categories[1].name
          }}
        </div>
        <div class="d-flex ai-center p-t-2">
          <span>难度</span>
          <span class="bange bg-primary">{{ HeroList.scores.difficult }}</span>
          <span>技能</span>
          <span class="bange bg-blue">{{ HeroList.scores.skills }}</span>
          <span>攻击</span>
          <span class="bange bg-red-1">{{ HeroList.scores.attack }}</span>
          <span>生存</span>
          <span class="bange bg-grey-1">{{ HeroList.scores.survive }}</span>
        </div>
      </div>
    </div>

    <!-- 滑动列表-->
    <!-- 列表分列  英雄初识展示英雄信息 进阶攻略展示视频(不详细展示) -->
    <!-- 构成 导航菜单---swiper -->
    <div class="p-x-3 bg-white">
      <!-- 导航栏 -->
      <div class="d-flex jc-around p-t-3 p-b-2 dh">
        <div class="nav">
          <div
            class="allways-item"
            :class="{ active: active === 0 }"
            @click="$refs.list.swiper.slideTo(0)"
          >
            英雄初识
          </div>
        </div>
        <div class="nav">
          <div
            class="allways-item"
            :class="{ active: active === 1 }"
            @click="$refs.list.swiper.slideTo(1)"
          >
            进阶攻略
          </div>
        </div>
      </div>
    </div>
    <!-- swiper -->
    <!-- silde-change 的realindex是从0开始的 -->
    <swiper
      ref="list"
      @slide-change="() => (active = $refs.list.swiper.realIndex)"
      :options="{ autoHeight: true }"
    >
      <swiper-slide>
        <!-- 英雄初识内容 -->

        <div class="biankuan1 bg-white">
          <!-- 按钮部分 -->
          <div class="d-flex jc-center ai-center p-t-2 p-b-3">
            <router-link tag="button" to="/" class="btt m-1">
              <i class="iconfont icon-zixun text-primary"></i>
              英雄介绍视频
            </router-link>
            <router-link tag="button" to="/" class="btt m-1 d-flex ai-center">
              <i class="iconfont icon-zixun text-primary"></i>
              一图识英雄
            </router-link>
          </div>
          <!-- 技能部分 -->
          <div class="skills">
            <!-- 四个img标签 -->
            <div class="d-flex jc-around">
              <!-- 有些英雄有3个技能有些有4个所以要用for循环来遍历完 -->
              <img
                :src="i.icon"
                v-for="(i, index) in HeroList.skills"
                :key="index"
                class="imgicon"
                :class="{ imgactive: igt === index }"
                @click="igt = index"
              />
            </div>
            <!-- 技能详情,存储在 currentskill属性中-->
            <div v-if="currentskill" class="p-x-2">
              <h3 class="fs-xl">{{ currentskill.name }}</h3>
              <div class="m-t-3 inskill p-b-3">
                {{ currentskill.description }}
              </div>
              <div class="tips p-t-3 p-b-4 text-grey-1">
                {{ currentskill.tips }}
              </div>
            </div>
          </div>
        </div>
        <!-- 技能/出装边框 -->
        <div class="biankuan2 bg-white m-t-3 p-x-2 p-b-2">
          <div class="d-flex ai-center p-t-3 p-b-2">
            <i class="iconfont m-l-2 m-r-1 icon-news"></i>
            <div class="fs-xl fsw-b">出装推荐</div>
          </div>
          <div class="fs-xl p-l-2 p-y-2">顺风出装</div>
          <div class="sunfen d-flex ai-center jc-around">
            <div v-for="(i, index) in HeroList.items1" :key="index">
              <img :src="i.icon" alt="noicon" class="cuzicon" />
              <div class="text-center">{{ i.name }}</div>
            </div>
          </div>

          <div class="fs-xl p-l-2 p-b-2 p-t-3">逆风出装</div>
          <div class="d-flex ai-center jc-around">
            <div v-for="(i, index) in HeroList.items2" :key="index">
              <img :src="i.icon" alt="noicon" class="cuzicon" />
              <div class="text-center">{{ i.name }}</div>
            </div>
          </div>

          <div class="nifen"></div>
        </div>
        <!-- 使用技巧 -->
        <div class="biankuan2 bg-white m-t-3 p-x-2">
          <div class="d-flex ai-center p-t-3 p-b-2">
            <i class="iconfont m-l-2 m-r-1 icon-news"></i>
            <div class="fs-xl fsw-b">使用技巧</div>
          </div>
          <div class="mes p-2">
            {{ HeroList.usageTips }}
          </div>
        </div>
        <!-- 对抗技巧 -->
        <div class="biankuan2 bg-white m-t-3 p-x-2">
          <div class="d-flex ai-center p-t-3 p-b-2">
            <i class="iconfont m-l-2 m-r-1 icon-news"></i>
            <div class="fs-xl fsw-b">对抗技巧</div>
          </div>
          <div class="mes p-2">
            {{ HeroList.battleTips }}
          </div>
        </div>
        <!-- 团战思路 -->
        <div class="biankuan2 bg-white m-t-3 p-x-2">
          <div class="d-flex ai-center p-t-3 p-b-2">
            <i class="iconfont m-l-2 m-r-1 icon-news"></i>
            <div class="fs-xl fsw-b">团战思路</div>
          </div>
          <div class="mes p-2">
            {{ HeroList.teamTips }}
          </div>
        </div>
        <!-- 英雄关系 -->
        <div class="biankuan2 bg-white m-t-3 p-x-2">
          <div class="d-flex ai-center p-t-3 p-b-2">
            <i class="iconfont m-l-2 m-r-1 icon-news"></i>
            <div class="fs-xl fsw-b">英雄关系</div>
          </div>
          <div>
            <div class="m-y-2 fs-xl">最佳搭档</div>
            <div
              v-for="(i, index) in HeroList.partners"
              :key="index"
              class="d-flex ai-center"
            >
              <img :src="i.heroes.icon" alt="" class="heroicon m-y-1 m-r-2" />
              <div>{{ i.description }}</div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <!-- 分割 -->
      <swiper-slide>
        <!-- 进阶攻略的内容 -->
        <h1>啥也不是进阶攻略</h1>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  props: {
    id: { required: true },
  },
  data() {
    return {
      HeroList: null,
      active: 0,
      igt: 0,
    };
  },
  //技能详情是根据当前选择的igt来选择HeroList数组的skills下标值,存在计算关系,所以要想获取当前的技能详情,可以用计算属性解决问题
  computed: {
    //选取currentskill就是选取当前技能数组
    currentskill() {
      return this.HeroList.skills[this.igt];
    },
  },
  methods: {
    async fetchherolist() {
      const res = await this.$http2.get(`hero/${this.id}`);
      this.HeroList = res.data;
    },
  },
  created() {
    this.fetchherolist();
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/_variables";
.topbar {
  position: sticky;
  top: 0;
  /* z轴层级，越高越顶部 */
  z-index: 999;
}
.top {
  height: 50vw;
  background: #fff no-repeat top center;
  background-size: auto 100%;
}
.bange {
  color: #d4d9de;
  margin: 0 0.25rem;
  display: inline-block;
  //要想让文字变成圆角，前提是：是个正方形，所以长宽要相等
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  border-radius: 50%;
  border: 0.0769rem /* 1px -> .0769rem */ solid rgba(255, 255, 255, 0.2);
}
.info {
  //设置渐变效果 ：全透明==>全黑
  //rgba=>红绿蓝透明(0~1)渐变函数从0透明渐变到1不透明
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}
.dh {
  border-bottom: 1px solid #d4d9de;
}
.btt {
  display: inline-block;
  border: 1px solid #eceef0;
  background-color: #fcfcfc;
  height: 3rem /* 39px -> 3rem */;
  width: 13.1538rem /* 171px -> 13.1538rem */;
  border-radius: 0.3rem;
  font-weight: bold;
}
img.imgicon {
  //默认透密边框
  width: 5.3846rem /* 70px -> 5.3846rem */;
  height: 5.3846rem /* 70px -> 5.3846rem */;
  border: 0.1538rem /* 2px -> .1538rem */ solid transparent;
  border-radius: 1.9231rem /* 25px -> 1.9231rem */;
  //点击橙色边框
  &.imgactive {
    // border: 0.0769rem /* 1px -> .0769rem */ solid
    //   map-get($map: $colors, $key: "primary");
    border: 0.1538rem /* 2px -> .1538rem */ solid
      map-get($map: $colors, $key: "primary");
    border-radius: 1.9231rem /* 25px -> 1.9231rem */;
  }
  //这样就不会有点击变小的效果了
}
.inskill {
  border-bottom: 0.0769rem /* 1px -> .0769rem */ solid $border-color;
}
.biankuan2 {
  border-radius: 0.3rem;
}
.biankuan1 {
  border-radius: 0.3rem;
}
.cuzicon {
  width: 3.8462rem /* 50px -> 3.8462rem */;
  height: 3.8462rem /* 50px -> 3.8462rem */;
  border-radius: 50%;
}
.sunfen {
  border-bottom: 1px solid $border-color;
}
.heroicon {
  display: inline-block;
  width: 3.6923rem !important/* 48px -> 3.6923rem */;
  height: 3.6923rem !important/* 48px -> 3.6923rem */;
  border-radius: 0.2308rem /* 3px -> .2308rem */;
}
</style>